<template>
	<view class="order-wrap page-bg">
		<view class="status-view">
			<view class="status">等待付款</view>
			<view class="status-desc">(请明天四点之前完成支付)</view>
		</view>

		<view class="page-body">
			<view class="address-wrap">
				<view class="addres ">
					<view class="address-info">
						<view class="address-name">
							<text>大成景</text>
							<text>18987422570</text>
						</view>
						<view class="address-add desc">云南省昆明市王旗营小区</view>
					</view>
					<view class="address-edit">修改</view>
				</view>
			</view>
			
			<view class="order-group">
				<view class="order-shop ">
					<view class="order-shop-name link">云平邵梦</view>
				</view>
			
				<view class="goods-item">
					<image class="goods-img" src="../../static/img_01.png"></image>
					<view class="goods-info">
						<view class="goods-title">雀巢三合一咖啡，三种口味任你选择，又一杯咖啡</view>
						<view class="goods-sepc">108g; 礼盒装</view>
						<view class="goods-price">
							<text class="price yuan">399</text>
							<text class="f24">x1</text>
						</view>
					</view>
				</view>
			
			
				<view class="order-info">
					<view class="line-info">
						<view class="line-info__title">订单金额</view>
						<view class="line-info__con yuan">26.3</view>
					</view>
					<view class="line-info">
						<view class="line-info__title">运费(快递)</view>
						<view class="line-info__con yuan">+55</view>
					</view>
					<view class="line-info">
						<view class="line-info__title">{{common.bean}}</view>
						<view class="line-info__con yuan">-55</view>
					</view>
					<view class="line-info">
						<view class="line-info__title">优惠券</view>
						<view class="line-info__con yuan">-55</view>
					</view>
				</view>
			
			</view>
			
			<view class="interval"></view>
			
			<view class="line-desc-wrap">
				<view class="line-desc">
					<view class="line-info__title">订单号码:</view>
					<view class="line-info__long">55555555555</view>
				</view>
				
				<view class="line-desc">
					<view class="line-info__title">下单时间:</view>
					<view class="line-info__long">2012-12-12</view>
				</view>
			</view>
			
			<view class="interval"></view>
			
			<view class="contact-us">
				<image class="contact-us__icon" src="../../static/common/icon_30.png" mode=""></image>
				<view class="contact-us__title">联系客服</view>
			</view>
			
			<view class="once-pay">
				<view class="once-price">
					应付金额:<text class="yuan price">39.99</text>
				</view>
				<view class="btn btn-cancle">取消付款</view>
				<view class="btn btn-orange" @click="paySuccess('/pages/mine/orderPaySuccess')">立即付款</view>
			</view>
		</view>
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import footerInfo from '../../components/footerInfo.vue'
	import common from '../../utils/common.js'
	export default {
		data() {
			return {
				isActive: false,
				text: '已经没有更多了',
				common
			}
		},
		methods: {
			setActice() {
				this.isActive = true
			},
			paySuccess(url) {
				this.$link(url)
			}
		},
		components: {
			footerInfo
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.page-body{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.address-wrap{
		position: relative;
		top: -20rpx;
		.address-info{
			flex-grow: 2;
			padding: 0 20rpx;
			
		}
		.address-edit{
			height: 50rpx;
			color: @font-orange-color;
			line-height: 50rpx;
			text-align: center;
			border-radius: 50rpx;
			border: 1px solid @font-orange-color;
			.f24;
			padding: 0 20rpx;
		}
	}
	.addres {
		background: @f;
		.br;
		.content-20;
		flex-wrap: wrap;
		background: url(../../static/common/icon_08.png) no-repeat left bottom, #fff;
		background-size: 100% 9upx;
		position: relative;
		margin-bottom: 20upx;
		.flex-base;
		.address-name {
			.fw;
			.f32;
			width: 100%;
			text {
				padding-right: 20upx;
			}
		}
		.desc {
			padding: 20upx 0;
		}
	}

	.address-wrap {
		.link::after {
			position: absolute;
			right: 20upx;
		}
	}


	.order-group {
		background-color: @f;
		.br;
		.content-20;
		margin-bottom: 20upx;
	}

	.order-group:last-child {
		margin-bottom: 0;
	}

	.order-shop {
		width: 100%;
		margin-bottom: 20upx;
		.flex-base;

		.order-shop-name {
			.flex-base;
			.f24;

			&::before {
				content: '';
				background: url() no-repeat left center;
				background-size: 22upx 22upx;
				display: block;
				width: 22upx;
				height: 24upx;
				padding-right: 10upx;
			}
		}

	}

	.goods-item {
		.flex-base;
		margin-bottom: 20upx;
		padding: 0;
		padding-bottom: 20rpx;
		.bb;
		.goods-img {
			width: 150upx;
			height: 150upx;
			.br;
			margin-right: 30upx;
			flex-shrink: 0;
		}
		.goods-info {
			flex-grow: 2;
		}
		.goods-title {
			.f30;
			width: 100%;
		}
		.goods-sepc {
			.f24;
			color: @font-dark-color;
			padding: 10upx 0;
		}
		.goods-price {
			width: 100%;
			.flex-base;
			justify-content: space-between;

			.num {
				.f24;
			}
		}
	}
	.status-view {
		background-color: @font-orange-color;
		color: @f;
		padding: 20rpx 0 40rpx 0;
		box-sizing: border-box;
		text-align: center;

		.status {
			.f30;
		}

		.status-desc {
			.f24;
		}
	}
	
	.message {
		height: 100upx;
		.content-20;
		padding: 20upx 0;
	}

	.pay-type {
		background: @f;
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.pay-type__item {
		width: 100%;
		height: 100upx;
		.flex-base;
		.bb;
	}
.pay-type__item:last-child{
		margin-bottom: none;
	}
	.pay-type__icon {
		width: 38upx;
		height: 38upx;
		flex-shrink: 0;
	}

	.pay-type__type {
		.f32;
		flex-grow: 2;
		padding: 0 20upx;
	}

	.pay-type__select {
		width: 34upx;
		height: 34upx;
		flex-shrink: 0;
	}

	.address-center {
		.f24;
		color: @theme-color;
		padding: 60upx 0 30upx 0;
	}

	.order-info {
			line-height: 35rpx;
		.line-info{
			.flex-base;
		}
		.line-info__title{
			.f24;
			color: @font-dark-color;
		}
		.line-info__con{
			.f26;
		}
	}
	.all-mount{
		padding-top: 20rpx;
		text-align: right;
		.f24;
		
	}
	
	.line-desc-wrap {
		background-color: @f;
		.br;
		.content-20;
		line-height: 35rpx;
		.line-desc{
			.flex-base;
			justify-content: flex-start;
		}
		.line-info__title{
			.f24;
			color: @font-dark-color;
			width:160rpx;
		}
		.line-info__con{
			.f24;
		}
	}
	
	.contact-us {
	background-color: @f;
	margin-bottom: 20rpx;
	.br;
		height: 88rpx;
		line-height: 88rpx;
		.flex-base;
		justify-content: center;
		.contact-us__icon{
			width: 36rpx;
			height: 26rpx;
			display: block;
			margin-right: 10rpx;
		}
		.contact-us__title{
			.f28;
		}
	}
	
	
	.once-pay {
		height: 100upx;
		.flex-base;
		padding: 0 30upx;
		box-sizing: border-box;
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: @f;
		.f24;
		color: @theme-color;
		.btn{
			height: 60rpx;
			line-height: 60rpx;
			.f26;
		}
	}
</style>
